<template>
	<view>
		<up-navbar
			:bgColor="'rgba(240,22,9,'+(scrollTop/10)+')'"
			title="谜货抽奖"
			title-color="#fff"
			@leftClick="back"
			left-icon-color="#fff"
		>
		</up-navbar>
		<view class="bg">
			<image :src="`${$imgurl}/static/cj-bg.jpg`" class="bg-img" mode="widthFix"></image>
			<view class="content">
				<view class="title-box">
					<image :src="`${$imgurl}/static/cj-title.png`" mode=""></image>
				</view>
				<view class="content-box">
					<image :src="`${$imgurl}/static/cj-img.png`" mode="widthFix"></image>
					<view class="btn" @click="onSubmit">
						<image :src="`${$imgurl}/static/cj-btn.png`" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="list-box-bg">
			<view class="list-box" :style="`background:url(${$imgurl}/static/cj-bg2.png) no-repeat;background-size: 100% 100%;`">
				<view class="title">
					<image :src="`${$imgurl}/static/cj-title2.png`" mode="heightFix"></image>
				</view>
				<scroll-view scroll-x >
					<view class="item-box">
						<view class="it" v-for="(item,index) in list">
							<image :src="item.image" mode="aspectFill"></image>
							<view class="tit">
								{{item.store_name}}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="msg-box">
					此处展示参与过所有的谜货抽奖 中奖礼物
				</view>
			</view>
		</view>
		<up-popup :show="alertShow" mode="center" bgColor="transparent" @close="alertShow=false" >
			<view class="answer-count-alert" >
				<image :src="`${$imgurl}/static/cj-alert-bg.png`" mode=""></image>
				<view class="text-box">
					<view class="text">
						<view class="h1">
							恭喜您抽中
						</view>
						<image :src="lottery.image" class="img" mode="aspectFill"></image>
						<view class="msg">
							{{lottery.store_name}}
						</view>
					</view>
					<view class="btn" @click="alertShow=false" >
						知道了
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad,onPageScroll} from "@dcloudio/uni-app"
	import {getLotteryInfoApi,getUserLotteryProductListApi,userJoinLotteryApi} from "@/api/lottery.js"
	const scrollTop=ref(0)
	onPageScroll((e)=>{
		if(e.scrollTop>=30){
			scrollTop.value=30
		}else{
			scrollTop.value=e.scrollTop/3
		}
	})
	const alertShow=ref(false)
	const info=ref('')
	const list=ref([])
	const lottery=ref('')
	onLoad(async (obj)=>{
		let res= await getLotteryInfoApi({id:obj.id})
		info.value=res.data
		res=await getUserLotteryProductListApi({id:obj.id})
		list.value=res.data.list
	})
	const onSubmit=async ()=>{
		let res= await userJoinLotteryApi({id:info.value.id})
		alertShow.value=true
		lottery.value=res.data
	}
	const back=async ()=>{
		// console.log('getCurrentPages',uni.getCurrentPages());
		try {
			await uni.navigateBack()
		} catch (error) {
			//TODO handle the exception
			uni.switchTab({
				url:'/pages/index/index'
			})
		}
	}
</script>

<style scoped lang="scss">
	.bg{
		position: relative;
	}
	.bg-img{
		width:100%;
		display: block;
		// position: relative;
	}
	.title-box{
		margin:0 auto;
		width:516rpx;
		height:168rpx;
		margin-top:30rpx;
		image{
			display: block;
			width: 100%;
			height:100%;
		}
	}
	@keyframes breathe {
	  0%, 100% {
	    transform: scale(0.95);
	  }
	  50% {
	    transform: scale(1.05); /* 放大一点 */
	  }
	}
	.content{
		position: absolute;bottom:30rpx;
		width:100%;
	}
	.content-box{
		width:726rpx;
		margin:0 auto;
		margin-top: -20rpx;
		position: relative;
		image{
			display: block;
			width: 100%;
			height:100%;
		}
		.btn{
			width:360rpx;height:124rpx;
			bottom:14rpx;
			position: absolute;
			left:50%;
			margin-left:-180rpx;
			animation: breathe 2s infinite ease-in-out;
		}
	}
	
	.list-box-bg{
		background: linear-gradient( 180deg, #F5E7CE 0%, #FFFFFF 100%);
		padding-top:20rpx;
		padding-bottom: 108rpx;
		.list-box{
			width:694rpx;
			height:408rpx;
			margin:0 auto;
			padding:24rpx 50rpx;
			box-sizing:border-box;
			.title{
				text-align: center;line-height: 0;
				image{
					height:36rpx;
				}
			}
			.item-box{
				padding-top:54rpx;
				white-space: nowrap;
				.it{
					display: inline-block;
					width:160rpx;
					margin-left:18rpx;
					background-color: #FFFFFF;
					overflow: hidden;
					border-radius: 12rpx;
					&:nth-child(1){
						margin-left:0;
					}
					image{
						width:100%;height:160rpx;
						display: block;
						box-sizing: border-box;
						border:4rpx solid #FFEBE3;
						border-radius: 12rpx;
					}
					.tit{
						background: linear-gradient( 90deg, #FCFEEC 0%, #F7FF9C 100%);
						text-align: center;
						font-size: 28rpx;
						font-weight: bold;
						color:#893A2A;
						line-height: 52rpx;
						white-space: nowrap; /* 防止文本换行 */
						overflow: hidden; /* 隐藏溢出的文本 */
						text-overflow: ellipsis; /* 显示省略号 */
					}
				}
			}
			.msg-box{
				margin-top:20rpx;
				text-align: center;
				font-size:24rpx;
				color:#CA7D66;
			}
		}
	}
	
	.answer-count-alert{
		position: relative;
		image{
			width:584rpx;
			height:948rpx;
			display: flex;
		}
		.text-box{
			position: absolute;
			width:100%;
			top:324rpx;
			text-align: center;
			.text{
				line-height: 1;
				.h1{
					font-weight: bold;
					font-size: 44rpx;
					color:#F5493D;
				}
				.img{
					width:232rpx;height:232rpx;
					display: block;
					margin:0 auto;
					margin-top:48rpx;
					border-radius: 16rpx;
				}
				.msg{
					font-size:32rpx;
					font-weight: bold;
					margin-top:32rpx;
				}
			}
		}
		.btn{
			width:440rpx;
			margin:0 auto;
			box-sizing: border-box;
			line-height: 96rpx;
			margin-top: 64rpx;
			background: linear-gradient( 125deg, #FF9940 0%, #FD2A00 100%);
			border-radius:16rpx;
			text-align: center;font-weight: bold;
			color:#fff;
		}
	}
</style>
